<!--
 * @Descripttion: 
 * @version: 
 * @Author: mmzhang
 * @Date: 2021-07-21 10:45:02
 * @LastEditTime: 2023-02-20 10:46:23
-->
<template>
  <div class="target-content">
    <div class="target-search flex flex-horizontal-end">
      <Form ref="formValidate" :model="formValidate" :label-width="120" class="flex flex-wrap">
        <FormItem label="审核状态：" prop="auditStatusDesc">
          <Select v-model="formValidate.auditStatusDesc" placeholder="请选择">
            <Option :value="item.dictValue" v-for="item in auditStatusDescList"
              :key="item.key">{{item.dictLabelCn}}</Option>
          </Select>
        </FormItem>
        <FormItem label="执行状态：" prop="executeStatus">
          <Select v-model="formValidate.executeStatus" placeholder="请选择">
            <Option :value="item.dictValue" v-for="item in executeStatusList" :key="item.key">
              {{item.dictLabelCn}}</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button type="primary" style="margin-left: 8px" @click="searchFun">搜索</Button>
          <Button @click="handleReset()" style="margin-left: 8px">重置</Button>
        </FormItem>
      </Form>
      <div class="subscription-operate flex">
        <Button type="primary" style="margin-left: 8px" v-if="unlocking('0107070101')"
          @click="adjustTargetFun">新增</Button>
        <Button @click="exportExcelFun()" style="margin-left: 8px"
          v-if="unlocking('0107070105')">导出</Button>
      </div>
    </div>
    <dt-tree-grid ref="treeGrid" :columnInfo="columns" :list="tableData" :rowId="rowId"
      :expandHierarchy="expandHierarchy"></dt-tree-grid>
    <!-- table 头部筛选 -->
    <table_filter ref="filterTable" :options="options" @openChangeFun="openChangeFun"
      @cancelFilterFun="cancelFilterFun" @okFilterFun="okFilterFun"></table_filter>
    <Spin fix v-show="loading">
      <Icon type="ios-loading" size=20 class="dt-loading"></Icon>
      <div>Loading</div>
    </Spin>
    <!--新增目标管理-->
    <!-- <Modal v-model="newTargetFlag" title="开盘目标设定" width="70%" :footer-hide="true"
      class="target-modal" @on-cancel="initData">
      <target-page v-if="newTargetFlag" @onClose="closeFun"></target-page>
    </Modal> -->
    <!--周目标-->
    <!-- <Modal v-model="weekTargetFlag" title="周目标拆分" width="70%" :footer-hide="true"
      class="target-modal" @on-cancel="initData">
      <week-target v-if="weekTargetFlag" @onClose="closeFun"></week-target>
    </Modal> -->
    <!--目标管理详情-->
    <Modal v-model="targetPageFlag" title="目标管理详情" width="70%" :footer-hide="true"
      class="detail-modal">
      <detail-target-page v-if="targetPageFlag" @onClose="closeFun"></detail-target-page>
    </Modal>
    <!--周目标详情-->
    <Modal v-model="weekPageFlag" title="周目标详情" width="70%" :footer-hide="true"
      class="detail-modal">
      <detail-week-page v-if="weekPageFlag" @onClose="closeFun"></detail-week-page>
    </Modal>
  </div>
</template>
<script>
  import columnConfig from './components/targetManage/targetColumn'
  import syntheticCommonMgr from '@/biz/synthetic/syntheticCommon'
  import targetManageMgr from '@/biz/synthetic/targetManage'
  import formMgr from '@/biz/salesForm/formCommon'
  import tool from '@/common/tool.js'
  import dt from '@dt/dt'
  import targetPage from './components/targetManage/targetPage.vue'
  import tootipMsg from './components/targetManage/tootipMsg.vue'
  import weekTarget from './components/targetManage/weekTarget.vue'
  import detailTargetPage from './components/common/detailTargetPage.vue'
  import detailWeekPage from './components/common/detailWeekPage.vue'
  export default {
    data() {
      return {
        newTargetFlag: false, // 周期新增 调整
        weekTargetFlag: false, // 周目标 新增 调整
        targetPageFlag: false, // 目标管理详情
        weekPageFlag: false, // 周目标详情
        formValidate: {
          buildingId: this.$dt.buildInfo().housesId,
          auditStatusDesc: '', // 审核状态
          executeStatus: '', // 执行状态
        },
        options: {
          type: '', // form类型  Input / DatePicker / Checkbox / Select / 操作配置头部
          nameCrimeSceneName: '',
          nameCrimeSceneVal: '',
          placeholder: '', // 提示语
          left: -1000, // 弹框fixed => left
          iconLeft: 0, // 弹框icon => left
          top: -1000, // 弹框fixed => top
          width: 218, // 弹框fixed => top
          setTimeout: null, // 鼠标离开三角形 200毫秒 关闭弹框
          cooperateType: '', // 合作模式
          coopModesList: syntheticCommonMgr.getCooperationModeAttrSort(),
          createUser: '', //创建人
          createUserList: [],
          createDate: '', //创建日期
        },
        auditStatusDescList: syntheticCommonMgr.getPeriodAuditStatusEnum(), // 审核状态
        executeStatusList: syntheticCommonMgr.getExecuteStatus(), // 执行状态
        loading: false,
        tableData: [],
        columns: columnConfig.columns,
        rowId: 'sort',
        expandHierarchy: 0,
        logList: [],
      }
    },
    components: {
      targetPage,
      tootipMsg,
      weekTarget,
      detailTargetPage,
      detailWeekPage,
    },
    created() {},
    mounted() {
      //发送this 到 js 文件里
      columnConfig.sendThis(this)
      this.initData()
    },
    methods: {
      // 创建人
      getCreateUser(val = '') {
        syntheticCommonMgr
          .getCreateUser({
            buildingId: this.$dt.buildInfo().housesId,
            keyword: val,
          })
          .then((res) => {
            this.options.createUserList = res
          })
          .catch((err) => {
            this.options.createUserList = []
          })
      },
      // 获取审核日志
      getAuditLog(row) {
        targetManageMgr
          .getAuditLog({
            periodId: row.periodId,
            type: row.levelDesc == '周期' ? 1 : 2,
          })
          .then((res) => {
            this.logList = res
          })
          .catch((err) => {
            this.logList = []
          })
      },
      // 列表操作按钮判断
      getOperateBtnShow(row, btnType) {
        return targetManageMgr.getOperateBtn(row, btnType)
      },
      closeFun() {
        this.newTargetFlag = false
        this.weekTargetFlag = false
        this.targetPageFlag = false
        this.weekPageFlag = false
        // 关闭弹框 更新下列表
        this.initData()
      },
      handleReset() {
        this.formValidate = {
          buildingId: this.$dt.buildInfo().housesId,
          auditStatusDesc: '', // 审核状态
          executeStatus: '', // 执行状态
        }
        // 清空表头筛选数据
        this.options.cooperateType = '' //合作模式
        this.options.createUser = '' //创建人
        this.options.createDate = '' // 创建日期
        dt.memory.set('target_params', undefined)
        this.initData()
      },
      searchFun() {
        dt.memory.set('target_params', undefined)
        this.initData()
      },
      // 导出
      exportExcelFun() {
        // 创建日期
        let beginCreateDate =
          formMgr.dealDate('createDate', this.options, 0) || ''
        let endCreateDate = formMgr.dealDate('createDate', this.options, 1) || ''

        if (this.$tool.dateDiff(beginCreateDate, endCreateDate).Y >= 2) {
          if (filterFlag == 1) {
            this.options['createDate'] = ''
          } else if (filterFlag == 2) {
            this.$Message.warning('创建日期跨度至多两年。')
            return false
          }
        }
        let params = { ...this.options, ...this.formValidate }
        params.beginCreateDate = beginCreateDate
        params.endCreateDate = endCreateDate
        targetManageMgr.exportTargetList(params)
      },
      //列表数据
      initData(filterFlag = 1) {
        let _this = this
        // 创建日期
        let beginCreateDate =
          formMgr.dealDate('createDate', this.options, 0) || ''
        let endCreateDate = formMgr.dealDate('createDate', this.options, 1) || ''

        if (this.$tool.dateDiff(beginCreateDate, endCreateDate).Y >= 2) {
          if (filterFlag == 1) {
            this.options['createDate'] = ''
          } else if (filterFlag == 2) {
            this.$Message.warning('创建日期跨度至多两年。')
            return false
          }
        }
        let params = { ...this.options, ...this.formValidate }
        params.beginCreateDate = beginCreateDate
        params.endCreateDate = endCreateDate
        this.loading = true
        targetManageMgr
          .getTargetManagerList(params)
          .then((res) => {
            this.tableData = res
            let checkParams = dt.memory.get('target_params')
            if (checkParams) {
              this.tableData.forEach((item) => {
                if (item.periodId == checkParams.periodId) {
                  item.children.forEach((monthItem) => {
                    if (monthItem.rangePeriod == checkParams.activedMonth) {
                      _this.$refs.treeGrid.treeExpand(item, true)
                      if (checkParams.activedWeek != '') {
                        _this.$refs.treeGrid.treeExpand(monthItem, true)
                      }
                    }
                  })
                }
              })
            }

            setTimeout(function() {
              _this.loading = false
            }, 0)
          })
          .catch((err) => {
            this.tableData = []
            this.loading = false
          })
      },
      // table 鼠标移到三角形事件
      thMouseoverFun(event, type, placeholder, width) {
        this.$refs.filterTable.clearFilter()
        this.options.type = type
        this.options.placeholder = placeholder
        this.options.left =
          event.currentTarget.getBoundingClientRect().left - (width / 2 - 5) <=
          200 ?
          200 :
          event.currentTarget.getBoundingClientRect().left -
          (width / 2 - 5) +
          width >
          document.documentElement.clientWidth ?
          document.documentElement.clientWidth - width :
          event.currentTarget.getBoundingClientRect().left - (width / 2 - 5)
        this.options.iconLeft = event.currentTarget.getBoundingClientRect().left
        this.options.top = event.currentTarget.getBoundingClientRect().top + 24
        this.options.width = width
      },
      // table 鼠标离开三角形事件
      thMouseoutFun() {
        this.$refs.filterTable.clearFilter()
        this.options.setTimeout = setTimeout(() => {
          this.options.left = -1000
          this.options.top = -1000
        }, 100)
      },
      openChangeFun(params) {
        if (params.type == 'createUser') {
          this.getCreateUser(params.value)
        }
      },
      // table from 取消事件
      cancelFilterFun() {
        this.initData()
      },
      // table from 确定事件
      okFilterFun() {
        this.initData(2)
      },
      // 新增
      adjustTargetFun(row, operateType = 1) {
        let params = {}
        if (operateType == 1) {
          // 新增
          params = {
            operateType: 1, // 用于区分0，查看,1，新增,2，调整 ,3,修改,4,重新发起
            periodId: '', // 查看 调整时需用的key
            activedStep: 0, // 目标录入 第几步
            activedMonth: '', // 第几月
            activedWeek: '', // 第几周
          }
          dt.memory.set('target_params', params)
          Object.keys(params).length && dt.session.set('target_params', params)
          // this.newTargetFlag = true
          this.$router.push({
            path: 'SetTargetManagement',
          })
        } else {
          switch (row.levelDesc) {
            case '周期':
              params = {
                operateType: operateType, // 用于区分0，查看,1，新增,2，调整,3,修改4,重新发起
                periodId: row.periodId, // 查看 调整时需用的key
                activedStep: 0, // 目标录入 第几步
                activedMonth: '', // 第几月
                activedWeek: '', // 第几周
              }
              dt.memory.set('target_params', params)
              Object.keys(params).length && dt.session.set('target_params', params)
              // this.newTargetFlag = true
              this.$router.push({
                path: 'SetTargetManagement',
              })
              break
            case '月':
              params = {
                operateType: operateType, // 用于区分0，查看,1，新增,2，调整,3,修改4,重新发起
                periodId: row.periodId, // 查看 调整时需用的key
                activedStep: 1, // 目标录入 第几步
                activedMonth: row.rangePeriod, // 第几月
                activedWeek: '', // 第几周
              }
              dt.memory.set('target_params', params)
              Object.keys(params).length && dt.session.set('target_params', params)
              this.newTargetFlag = true
              break
            case '周':
              params = {
                operateType: operateType, // 用于区分0，查看,1，新增,2，调整,3,修改
                periodId: row.periodId, // 查看 调整时需用的key
                activedStep: 0, // 目标录入 第几步
                activedMonth: row.monthDesc, // 第几月
                activedWeek: row.rangePeriod, // 第几周
              }
              dt.memory.set('weekTarget_params', params)
              // this.weekTargetFlag = true
              Object.keys(params).length && dt.session.set('weekTarget_params', params)
              this.$router.push({
                path: 'weekTarget',
              })
              break
            default:
              break
          }
        }
      },
      // 查看
      viewTargetFun(row) {
        let params = {}
        // 区分 周期 月 周
        switch (row.levelDesc) {
          case '周期':
            params = {
              operateType: 0, // 用于区分0，查看,1，新增,2，调整 ,
              periodId: row.periodId, // 查看 调整时需用的key
              activedStep: 0, // 目标录入 第几步
              activedMonth: '', // 第几月
              activedWeek: '', // 第几周
              isShowExamine: false, // 是否展示审核按钮
            }
            dt.memory.set('target_params', params)
            this.targetPageFlag = true
            break
          case '月':
            params = {
              operateType: 0, // 用于区分0，查看,1，新增,2，调整 ,
              periodId: row.periodId, // 查看 调整时需用的key
              activedStep: 1, // 目标录入 第几步
              activedMonth: row.rangePeriod, // 第几月
              activedWeek: '', // 第几周
              isShowExamine: false, // 是否展示审核按钮
              showTab: 'monthTarget', // 展示详情tab
            }
            dt.memory.set('target_params', params)
            this.targetPageFlag = true
            break
          case '周':
            params = {
              operateType: 0, // 用于区分0，查看,1，新增,2，调整 ,
              periodId: row.periodId, // 查看 调整时需用的key
              activedStep: 0, // 目标录入 第几步
              activedMonth: row.monthDesc, // 第几月
              activedWeek: row.rangePeriod, // 第几周
              isShowExamine: false, // 是否展示审核按钮
              headerInfo: {
                buildingName: this.$dt.buildInfo().housesName,
                rangePeriod: row.monthDesc,
                createDate: row.createDate,
                auditStatus: row.auditStatus,
              },
            }
            // dt.memory.set('target_params', params)
            dt.memory.set('weekTarget_params', params)
            Object.keys(params).length && dt.session.set('weekTarget_params', params)
            this.weekPageFlag = true
            break
          default:
            break
        }
      },
      // 拆分周指标
      splitWeekFun(row) {
        let params = {
          operateType: 1, // 用于区分0，查看,1，新增,2，调整,3,修改
          periodId: row.periodId, // 查看 调整时需用的key
          activedStep: 0, // 目标录入 第几步
          activedMonth: row.rangePeriod, // 第几月
          activedWeek: '', // 第几周
        }
        dt.memory.set('weekTarget_params', params)
        Object.keys(params).length && dt.session.set('weekTarget_params', params)
        // this.weekTargetFlag = true
        this.$router.push({
          path: 'weekTarget',
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .target-content {
    padding: 20px;
    width: 100%;

    .ivu-spin-fix {
      background-color: rgba(255, 255, 255, 0.35);
      width: calc(100% - 200px);
      left: 200px;
    }

    .target-search {
      .ivu-form {
        width: 100%;

        .ivu-form-item {
          width: 25%;
        }
      }

      .subscription-operate {
        margin-right: 30px;
      }

      .export-btn {
        line-height: 30px;
        cursor: pointer;
        color: #2d8cf0;
        text-align: center;
        border-bottom: 1px #e8eaec solid;
      }
    }
  }
</style>
<style>
  .target-modal .ivu-modal {
    top: 20px;
  }

  .detail-modal .ivu-modal {
    top: 20px;
  }

  .detail-modal .elx-table .elx-body--column.col--ellipsis,
  .detail-modal .elx-table .elx-footer--column.col--ellipsis,
  .detail-modal .elx-table .elx-header--column.col--ellipsis,
  .detail-modal .elx-table.elx-editable .elx-body--column {
    height: 36px;
  }
</style>